{% from 'macros/icon.njk' import icon with context %}

{#
Finds a post by its url (including language specific urls).
Returns a link to the post and uses the post's title for link text.

This will recursively keep outputting links depending on how many sections
have been defined in the _data/docs/*.yml file for this project.
#}
{% macro projectSections(sections, previousType) %}

{% set type = 'row' %}
{% if previousType === 'row' %}
  {% set type = 'column' %}
{% elif previousType === 'column' %}
  {% set type = 'nested-column' %}
{% endif %}

<ul class="project-sections__{{type}} stack flow-space-300 pad-left-0 gap-top-0" role="list">
  {% for item in sections %}
    {% if item.sections %}
      <li>
        {% set translatedTitle = item.title | i18n(locale) %}
        {% set translatedSlug = translatedTitle | slugify %}
        <div id="{{ translatedSlug }}">
          {{ translatedTitle }}
          <a class="heading-link" href="#{{ translatedSlug }}">#</a>
        </div>
        {{ projectSections(item.sections, type) }}
      </li>
    {% elif item.url %}
      {#
        Reset postTitle and friends, in case we can't find the post below.
        (Otherwise, the values from our previous iteration are used.)
      #}
      {% set postTitle = '' %}
      {% set postDescription = '' %}
      {% set postUrl = '' %}

      {% if item.title %}
        {% set postTitle = item.title | i18n(locale) %}
        {#
          Ideally every page should have a description but the design doesn't
          break if one is omitted.
        #}
        {% if item.description %}
          {% set postDescription = item.description | i18n(locale) %}
        {% endif %}
        {% set postUrl = item.url %}
      {% else %}
        {% set post = helpers.findByUrl(collections.all, item.url, locale) %}
        {% if post %}
          {% set postTitle = post.data.title %}
          {% set postDescription = post.data.description %}
          {% set postUrl = post.url %}
        {% endif %}
      {% endif %}

      {% if postTitle %}
        {#
          Check to see if the item is a regular post on the site or an external
          link. External links will display a special icon and open in a new
          window.
        #}
        {% set isExternal = helpers.isExternalLink(item.url) %}

        {#
          Create the inner part of this section so we can render it again below.
          We only need to wrap it in a div for the outermost case.
        #}
        {% set inner %}
          {% if type === 'column' %}
            <span class="project-sections__icon"></span>
          {% endif %}
          <a
            class="display-inline-flex align-center color-primary-shade decoration-none surface lg:gap-right-600"
            href="{{ postUrl }}"
            {%- if isExternal -%}
            target="_blank"
            rel="noopener"
            {%- endif -%}
            >
              {{ postTitle }}
              {% if isExternal %}
                {{ icon('external-link', {className: 'gap-left-100'}) }}
              {% endif %}
          </a>
        {% endset %}

        <li>
          {% if type == 'row' %}
            <div>{{ inner | safe }}</div>
          {% else %}
            {{ inner | safe }}
          {% endif %}
          {% if type !== 'nested-column' %}
            <div class="project-sections__description measure-long">{{ postDescription }}</div>
          {% endif %}
        </li>
      {% endif %}
    {% endif %}
  {% endfor %}
</ul>

{% endmacro %}
